﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - Axes</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - Axes"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n351","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="SpreadJS allows users to configure and customize axes in a chart along with the display units." /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="946d2240-80ec-4d13-9430-adf0a079d961"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><meta name="Microsoft.Help.TocParent" content="0750c4c2-a97b-44a4-b551-b2d5b9e96832"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><meta name="Microsoft.Help.TocOrder" content="5"/><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="i-breadcrumbs-container">
<a href="overview.html">SpreadJS Documentation</a>
 / <a href="devguide.html">Developer's Guide</a>
 / <a href="features.html">Features</a>
 / <a href="ManagingDataVisualizationAndObjects.html">Manage Data Visualization and Objects</a>
 / <a href="Charts.html">Charts</a>
 / <a href="ConfigureChartElements.html">Chart Elements</a>
 / Axes</div><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->Axes<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>SpreadJS allows users to configure and customize axes in a chart along with the display units.</p>

<h3 id="a">What are Axes?</h3>

<p>Axes refers to the dimensions of the plot area in terms of a horizontal scale (x-axis or category axis) and a vertical scale&nbsp;(y-axis or value&nbsp;axis).</p>

<p><u>Types of Chart Axes:</u> Typically, a basic two-dimensional chart contains&nbsp;four types of axes, namely the primary category axis, the primary value axis, the secondary category axis and the secondary value axis.</p>

<h3 id="b">Configure Display Units On Value Axis</h3>

<p>Display units can be configured&nbsp;only on&nbsp;the&nbsp;value axis (both primary value axis and secondary value axis).&nbsp;There are two ways to configure axes display units while working with charts in SpreadJS:</p>

<ol>
    <li><u><strong>Configure Built-in&nbsp;Display Units</strong></u>&nbsp;- Users can choose from a predefined list of available options (None, Hundreds, Thousands, 10000, 100000, Millions, 100000000000, 10000000000, Billions, Trillions etc.) while showing the displaying unit values.<br />
    <br /></li>

    <li><u><strong>Configure Custom&nbsp;Display Units</strong></u>&nbsp;- Users can define a custom display unit with a meaningful numeric value which is not available in the built-in options. However, it is important to note that the custom display unit value provided by the user must be a positive number. Also, while defining custom axis display units, custom text values&nbsp;i.e. strings are not supported.&nbsp;</li>
</ol>

<p>The following screenshot depicts&nbsp;a chart with built-in configuration of display unit on primary value axis and custom configuration of display unit on secondary value&nbsp;axis.</p>

<p><img style="MAX-WIDTH: 100%; HEIGHT: auto" border="0" alt="" src="images/spreadjsv13images/chart-axis-display-unit.png" /></p>

<p>Users can get or set the axes of the chart using the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.Charts.Chart~axes.html" data-auto-update-caption="true"><u><font color="#0066CC">axes()&nbsp;</font></u></a>method of the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.Charts.Chart.html"><u><font color="#0066CC">Chart</font></u></a> class.&nbsp;While working with charts, users can add, modify and customize the axes display units as per their specific requirements and preferences.&nbsp; If users want to delete the axis display units from the chart, then the value of the axis display unit must be set to null.</p>

<p><strong>Supported Chart Types</strong> - Any chart type that contains value axis supports the configuration of axis display units. Hence, only primary value axis and secondary value axis are supported.</p>

<h3 id="c">Customize Display Unit Labels</h3>

<p>While working with axis display units, users can choose whether to show or hide the display unit labels. Also, users can modify the default appearance of the display unit labels by changing its font, customizing the font color, and configuring&nbsp;the font family of the display units. &nbsp;</p>

<div class="i-box i-box-note">
    <p><strong>Note:</strong> &nbsp;The following limitations must be kept in mind while configuring and customizing the axis display units in a chart:</p>

    <ul>
        <li>When the displayUnit.visible is set to false (visibility of the display units is hidden) and users are importing or exporting JSON files, the display unit label nodes will not be created in the xml files and the style of the display unit label will be lost in the output xml file.</li>

        <li>This feature doesn't support the customization of the display unit label text.</li>
    </ul>
</div>

<h3 id="d">Using Code</h3>

<p>This code shows how to configure Axes along with display unit labels in the chart.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">
                    <p>&lt;script&gt;<br />
                    $(document).ready(function ()</p>

                    <p>{<br />
                    // Initializing Spread<br />
                    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });<br /></p>

                    <p>// Get the activesheet<br />
                    var activeSheet = spread.getActiveSheet();<br />
                    activeSheet.suspendPaint();</p>

                    <p>// Prepare data for chart<br />
                    activeSheet.setValue(0, 1, "Y-2015");<br />
                    activeSheet.setValue(0, 2, "Y-2016");<br />
                    activeSheet.setValue(0, 3, "Y-2017");<br />
                    activeSheet.setValue(0, 4, "Y-2018");<br />
                    activeSheet.setValue(0, 5, "Y-2019");<br />
                    activeSheet.setValue(1, 0, "Gradlco Corp. Ltd");<br />
                    activeSheet.setValue(2, 0, "Saagiate Corp. Ltd.");<br />
                    activeSheet.setColumnWidth(0, 120);<br />
                    for (var r = 1; r &lt;= 2; r++) {<br />
                    for (var c = 1; c &lt;= 5; c++) {<br />
                    &nbsp; activeSheet.setValue(r, c, parseInt(Math.random() * 5000));<br />
                    }<br />
                    }<br /></p>

                    <p>// Add columnClustered chart<br />
                    chart_columnClustered = activeSheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 100, 500, 400);</p>

                    <p>var series = chart_columnClustered.series();<br />
                    series.add({<br />
                    chartType: GC.Spread.Sheets.Charts.ChartType.columnClustered,<br />
                    axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,<br />
                    name: "Sheet1!$A$2",<br />
                    xValues: "Sheet1!$B$1:$F$1",<br />
                    yValues: "Sheet1!$B$2:$D$2"<br />
                    });<br />
                    series.add({<br />
                    chartType: GC.Spread.Sheets.Charts.ChartType.line,<br />
                    axisGroup: GC.Spread.Sheets.Charts.AxisGroup.secondary,<br />
                    name: "Sheet1!$A$3",<br />
                    xValues: "Sheet1!$B$1:$F$1",<br />
                    yValues: "Sheet1!$B$3:$D$3"<br />
                    });</p>

                    <p>var axes = chart_columnClustered.axes();<br /></p>

                    <p>// Configure Primary Category Axis<br />
                    axes.primaryCategory.style.color = 'green';<br />
                    axes.primaryCategory.title.color = 'green';<br />
                    axes.primaryCategory.title.text = 'Primary Category Axes';</p>

                    <p>&nbsp;</p>

                    <p>// Configure Primary Value Axis<br />
                    axes.primaryValue.style.color = 'blue';<br />
                    axes.primaryValue.title.color = 'blue';<br />
                    axes.primaryValue.title.text = 'Primary Value Axes';<br />
                    axes.primaryValue.title.fontSize = 16;</p>

                    <p>&nbsp;</p>

                    <p>// Configure BuiltIn DisplayUnit for "Primary Value Axis"<br />
                    axes.primaryValue.displayUnit = {<br />
                    unit: GC.Spread.Sheets.Charts.DisplayUnit.thousands,&nbsp; // BuiltIn DisplayUnit is thousands<br />
                    visible: true,<br />
                    style: {<br />
                    &nbsp; color: 'red',<br />
                    &nbsp; transparency: 0.1,<br />
                    &nbsp; fontFamily: 'arial',<br />
                    &nbsp; fontSize: 14<br />
                    }<br />
                    };</p>

                    <p>// Configure Secondary Category Axis<br />
                    axes.secondaryCategory.visible = true;<br />
                    axes.secondaryCategory.style.color = 'green';<br />
                    axes.secondaryCategory.title.color = 'green';<br />
                    axes.secondaryCategory.title.text = 'Secondary Category Axes';<br />
                    axes.secondaryCategory.title.fontSize = 16;</p>

                    <p>&nbsp;</p>

                    <p>// Configure Custom DisplayUnit for "Secondary Value Axis"<br />
                    axes.secondaryValue.displayUnit = {<br />
                    unit: 500, // Custom Display unit is 500<br />
                    visible: true,<br />
                    style: {<br />
                    &nbsp; color: 'red',<br />
                    &nbsp; transparency: 0.1,<br />
                    &nbsp; fontFamily: 'Verdana',<br />
                    &nbsp; fontSize: 14<br />
                    }<br />
                    };</p>

                    <p>// Configure Secondary Value Axis<br />
                    axes.secondaryValue.style.color = 'blue';<br />
                    axes.secondaryValue.title.color = 'blue';<br />
                    axes.secondaryValue.format = 'General';<br />
                    axes.secondaryValue.title.text = 'Secondary Value Axes';<br />
                    chart_columnClustered.axes(axes);</p>

                    <p>&nbsp;</p>

                    <p>// Configure Chart Title<br />
                    var title = chart_columnClustered.title();<br />
                    title.text = "Annual Sales Record";<br />
                    title.fontFamily = "Cambria";<br />
                    title.fontSize = 28;<br />
                    title.color = "Red";<br />
                    chart_columnClustered.title(title);<br />
                    activeSheet.resumePaint();<br />
                    });<br />
                    &lt;/script&gt;</p>
                </td>
            </tr>
        </tbody>
    </table>
</div><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
